<template>
    <div class="chat-input">
        <div class="top">
            <textarea v-model="text"></textarea>
            <button @click="onSend(1)">发送</button>
        </div>
        <div class="bottom">
            <div class="item">
                <i class="iconfont icon-dianhua1"></i>
            </div>
            <div class="item">
                <input type="file" @change="preview1($event)" multiple="multiple" accept="image/x-png, image/jpg, image/jpeg, image/gif">
                <i class="iconfont icon-yingyuan1"></i>
            </div>
            <div class="item">
                <i class="iconfont icon-dingwei1" @click="showMap"></i>
            </div>
            <div class="item">
                <i class="iconfont icon-shequ1"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ChatInput',
    data() {
        return {
            text: ''
        }
    },
    methods: {
        onSend(i,e) {
            if(i === 1) {
                if(this.text.length) {
                    this.$emit('onSend',this.text,i)
                    this.text = ''
                }
            }else if(i === 2) {
                this.$emit('onSend',e,i)
            }
        },
        preview1(e) {
            const file = e.srcElement.files[0]
            let that = this
            this.blobToDataUrl(file,function(base64Url) {
                that.onSend(2,base64Url)
            })
        },
        showMap() {
            this.$emit('showMap')
        },
        blobToDataUrl(blob,cb) {
            let reader = new FileReader()
            reader.onload = function(e) {
                var base64 = e.target.result
                cb(base64)
            }
            reader.readAsDataURL(blob)
        },
    },
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.chat-input{
    padding-top:5px;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    @include background_color("background_color3");
    .top{
        display: flex;
        align-items: flex-end;
        padding:0 0.625rem;
        textarea{
            resize: none;
            border:0;
            outline:none;
            flex:1;
            height:2.0625rem;
            font-size:0.875rem;
            border-radius:20px;
            padding:0.5rem 0.75rem;
            @include background_color("background_color7");
            @include font_color("font_color11");
            font-family:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
        }
        button{
            margin-left:0.3125rem;
            border:0;
            outline:none;
            padding:0.5rem 0.75rem;
            border-radius:1.25rem;
            @include background_color("background_color6");
            @include font_color("font_color3");
        }
    }
    .bottom{
        display: flex;
        padding:0.5rem 0.625rem;
        .item{
            flex:1;
            text-align: center;
            &:nth-child(2) {
                position: relative;
                input{
                    position: absolute;
                    left:0;
                    opacity:0;
                    width:100%;
                    height:100%;
                }
            }
            .iconfont{
                font-size:1.5rem;
                @include font_color("font_color10");
            }
        }
    }
}
</style>